<script lang="ts">
import {defineComponent, onMounted, PropType, ref, watch} from "@vue/runtime-core";
import {
  QTAnimationInterpolatorType,
  QTAnimationPropertyName,
  QTAnimationRepeatMode,
  QTAnimationValueType
} from "@quicktvui/quicktvui3";
import {generateUniqueNumber} from "../../utils/Tools";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {Transform} from "../../types/Transform";
import {capitalize} from "vue";
const TAG='AAnimateGroup'
export default defineComponent({
  emits:['end'],
  props:{
    transforms:{
      type:Array as PropType<Transform[]>
    },
    execute:{
      type:Boolean,
      default:false
    },
    playMode:{
      type:String as PropType<'sequential'|'together'>,
      default:'together'
    }
  },
  setup(props,{emit}){
    watch(()=>props.execute,(newVal)=>{
      if (newVal) {
        log.d(TAG,'execute')
        execute()
      }
    })
    const animationViewRef=ref()
    const groupUniqId=generateUniqueNumber()
    function execute(){
      if (!props.transforms) {
        log.e(TAG,'transforms is empty')
        return;
      }
      const uniqIds = props.transforms?.map(()=>generateUniqueNumber());
      animationViewRef.value?.animatorSet(groupUniqId, -1, true);
      props.transforms.forEach((item,index)=>{
        if (item.values.length > 10) {
          log.e(TAG,'Max 10 animation values supported');
          return;
        }
        // 参数归一化处理
        const {
          valueType=QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
          type,
          duration,
          values = [],
          interpolator = null,
          repeatMode=QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE,
          repeatCount=0
        } = item;

        const methodName = `objectAnimator${values.length || ''}`;
        const listenAnimator=true
        const listenAnimatorValue=false
        const uniqId=uniqIds[index]
        const args = [
          uniqId,
          valueType,
          type,
          ...values.slice(0, 10), // 限制最大参数数量
          duration,
          repeatMode,
          repeatCount,
          listenAnimator,
          listenAnimatorValue,
          interpolator
        ].filter(arg => arg !== undefined);
        // 动态调用方法
        const animatorMethod = animationViewRef.value?.[methodName];
        if (typeof animatorMethod === 'function') {
          animatorMethod.apply(animationViewRef.value, args);
        } else {
          log.e(TAG,`Invalid animator method: ${methodName}`);
        }
      })
      //创建分组
      const args=[groupUniqId,...uniqIds]
      let methodName = `play${capitalize(props.playMode)}${uniqIds.length || ''}`;
      if (props.playMode==='sequential'){
        methodName = `playSequentially${uniqIds.length || ''}`;
      }
      const animatorMethod = animationViewRef.value?.[methodName];
      if (typeof animatorMethod === 'function') {
        animatorMethod.apply(animationViewRef.value, args);
      } else {
        log.e(TAG,`Invalid animator method: ${methodName}`);
      }
      animationViewRef.value.startAnimator(groupUniqId)
    }
    const log = useESLog()

    function onAnimationCancel(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationCancel------->>>>', id)
      }
    }

    function onAnimationEnd(id, isReverse) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationEnd------->>>>', id, isReverse)
      }
      emit('end')
    }

    function onAnimationRepeat(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationRepeat------->>>>', id)
      }
    }

    function onAnimationStart(id, isReverse) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationStart------->>>>', id, isReverse)
      }
    }

    function onAnimationPause(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationPause------->>>>', id)
      }
    }

    function onAnimationResume(id) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-------onAnimationResume------->>>>', id)
      }
    }
    return {
      onAnimationEnd,
      animationViewRef
    }
  }
})

</script>

<template>
  <qt-animation
      ref="animationViewRef"
      :onAnimationEnd="onAnimationEnd"
  >
    <slot/>
  </qt-animation>
</template>

<style scoped>

</style>
